<template>
  <div class="user-container">
    <!-- 用户信息 -->
    <div class="user-card">
      <!-- 用户 姓名-头像  -->
      <van-cell >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img :src="$store.state.userPhoto" alt="" class="avatar">
        </template>
        <template #title>
          <span class="custom-title username">{{$store.state.userName === null ? userObj.name : $store.state.userName}}</span>
        </template>
        <template #label>
          <van-tag color="#fff" text-color="#007bff">申请认证</van-tag>
        </template>
      </van-cell>
      <!-- 动态 - 关注 - 粉丝 -->
      <div class="user-data">
        <div class="user-data-item">
          <span>{{userObj.art_count}}</span>
          <span>动态</span>
        </div>
        <div class="user-data-item">
          <span>{{userObj.follow_count}}</span>
          <span>关注</span>
        </div>
        <div class="user-data-item">
          <span>{{userObj.fans_count}}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <!--操作面板   -->
    <div calss="action-card">
      <van-cell-group>
        <van-cell title="编辑资料" icon="edit" is-link  to="/user_edit" />
        <van-cell title="小思同学" icon="chat-o" is-link to="/chat" />
        <van-cell title="退出登录" icon="warning-o" is-link @click="quitFn"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import { Dialog } from 'vant'
import { removeToken } from '@/utils/token'
import { mapMutations } from 'vuex'
export default {
  name: 'UserIndex',
  data () {
    return {
      userObj: {} // 用户个人信息
    }
  },
  async created () {
    const res = await getUserInfoAPI()
    this.userObj = res.data.data
    console.log(res)
    // vuex 两种使用方式： 1。直接使用 2.映射
    // this.$store.commit('SET_USERPHOTO', this.uersObj.photo)
    this.SET_USERPHOTO(this.userObj.photo)
  },
  methods: {
    // 点击 - 退出登录
    quitFn () {
      // 业务/思路：清空token，路由跳转登录页
      Dialog.confirm({
        title: '提示',
        message: '这就走了？不爱我了吗？'
      })
        .then(() => { // 用户点在 ‘确认’ 会执行promise中的resolve -> 触发then
          // on confirm
          removeToken()
          // this.$router.push() 压栈（会产生历史记录 可回退） this.$router.replace() 替换（不会产生历史记录）
          this.$router.replace({
            path: '/login'
          })
        })
        .catch(() => { // 用户点在‘取消’ 会执行promise中的rejected -> 触发catch
          // on cancel
        })
    },
    ...mapMutations(['SET_USERPHOTO'])
  }
}
</script>

<style scoped lang="less">
.user-container {
  padding-bottom: 51px;
  .user-card {
    background-color: #007bff;
    color: white;
    padding-top: 20px;
    .avatar{
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    }
    .van-cell {
      background: #007bff;
      color: white;
      &::after {
        display: none;
      }
    }
    .username {
        font-size: 14px;
        font-weight: bold;
      }
    .user-data {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 14px;
      padding: 30px 0;
      .user-data-item {
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        width: 33.33%;
      }
    }
  }

}
</style>
